<template>
    <div>
        <el-form :inline="true" :model="outRegister" class="search-form" style="margin-top:10px" label-width="100px">
            <el-row>
                <el-col :span="8">
                    <el-form-item label="车牌号">
                        <el-input style="width:150px" v-model="outRegister.plateNumber"></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-checkbox v-model="isDouble" :style="isBig&&'visibility:hidden'" @change="handleCheck">双 柜</el-checkbox>
                    <el-checkbox v-model="isBig" @change="handleCheckBig">大堆箱</el-checkbox>
                </el-col>
            </el-row>
        </el-form>
        <div v-if="!isBig">
            <div class="border-line-dashed"></div>
            <container-form type="out" :container="containerOne"></container-form>
            <div class="border-line-dashed"></div>
            <container-form type="out" :container="containerTwo" :containerNoShow="!isDouble"></container-form>
        </div>
        <div v-if="isBig">
            <div class="border-line-dashed"></div>
            <heap-form :container.sync="heapContainer" ref="heapForm"></heap-form>
        </div>
        <div class="border-line-dashed"></div>
        <div style="text-align: center" class="mt-10">
            <el-button type="primary" v-if="power('WJOB_GATE_CONTAINER_REGISTER:ADD')" @click="handleSubmit" :loading="$store.getters.loadingBtn">确认进港</el-button>
        </div>
    </div>
</template>

<script>
import containerForm from "./containerForm.vue";
import heapForm from "./heapForm.vue";
import {
    gateContainerOut,
    gateContainerOutHeap
} from "@/api/middleControl/middleControl";
export default {
    components: {
        containerForm,
        heapForm
    },
    data() {
        return {
            outRegister: {},
            containerOne: this.clearForm(),
            containerTwo: this.clearForm(),
            heapContainer: {},
            isDouble: false,
            isBig: false
        };
    },
    methods: {
        // 确认进港
        handleSubmit() {
            let container = [];
            if (!this.outRegister.plateNumber) {
                this.$message({ message: "请先填写车牌号", type: "error" });
                return;
            }
            if (!this.isBig) {
                if (this.isDouble) {
                    container.push(this.containerOne, this.containerTwo);
                    if(!container[1].containerNo){
                        this.$message({message:'请填写第二个箱信息',type:'error'})
                        return
                    }
                } else {
                    container.push(this.containerOne);
                }
                if(!container[0].containerNo){
                    this.$message({message:'请填写第一个箱信息',type:'error'})
                    return
                }
                let data = {
                    plateNumber: this.outRegister.plateNumber,
                    isDouble: this.isDouble,
                    container
                };
                if (!data.container.length === 0) {
                    this.$message({ message: "请先填写箱信息", type: "error" });
                    return;
                }
                gateContainerOut(data).then(res => {
                    this.$message({ message: "登记成功!", type: "success" });
                    const id = res.data.registerId;
                    this.outRegister.plateNumber = "";
                    this.containerOne = this.clearForm();
                    this.containerTwo = this.clearForm();
                    this.$emit('load')
                    const origin = window.location.origin+window.location.pathname
                    window.open(origin + "/#/TicketPrint?id=" + id);
                });
            } else {
                if(!this.heapContainer.entrustNo){
                    this.$message({ message: "请先填写委托号", type: "error" });
                    return
                }
                let jobNum = this.$refs.heapForm.entust.jobNum;
                for (let i = 0; i < jobNum.length; i++) {
                    container.push(this.heapContainer.container[i]);
                }
                let heapContainer = { ...this.heapContainer, jobNum };
                let data = {
                    specify: false,
                    ...heapContainer,
                    ...container,
                    plateNumber: this.outRegister.plateNumber
                };
                gateContainerOutHeap(data).then(res => {
                    this.$emit('load')
                    this.$message({ message: "登记成功!", type: "success" });
                    // 小票编号,通过小票编号查询小票分页记录,取第一条数据
                    // let ticketNo = res.data.ticketNo;
                    this.outRegister.plateNumber = "";
                    this.heapContainer = {};
                    this.$refs.heapForm.entust = {};
                    const id = res.data.registerId;
                    const origin = window.location.origin+window.location.pathname
                    window.open(origin + "/#/TicketPrint?id=" + id);
                });
            }
        },
        clearForm() {
            return {
                containerNo: "",
                entrustNo: "",
                containerType: "",
                containerSize: "",
                ifHeavy: "",
                tradeType: "",
                ownerName: "",
                ownerId: "",
                cargoName: "",
                cargoWeight: "",
                importAndExport: ""
            };
        },
        handleCheck(bool) {
            this.containerTwo = this.clearForm();
        },
        handleCheckBig(bool) {
            this.containerOne = this.clearForm();
            this.containerTwo = this.clearForm();
        }
    }
};
</script>

<style>
</style>
